<script lang="ts">
import vue from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <scroll-view scroll-y class="viewport">
    <!-- 基本信息 -->
    <view class="goods">

    </view>

    <!-- 商品详情 -->
    <view class="detail panel">
      <view class="title">
        <text>详情</text>
      </view>
      <view class="content">
        <view class="properties">
          <!-- 属性详情 -->
          <view class="item">
            <text class="label">尺寸</text>
            <text class="value">34x34cm</text>
          </view>
          <view class="item">
            <text class="label">使用季节</text>
            <text class="value">不限季节</text>
          </view>
          <view class="item">
            <text class="label">材质</text>
            <text class="value">长绒棉</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 同类推荐 -->
    <view class="similar panel">
      <view class="title">
        <text>同类推荐</text>
      </view>
      <view class="content">
        <navigator
          v-for="goods in 4"
          :key="goods"
          class="goods"
          hover-class="none"
          :url="`/pages/goods/goods?id=`"
        >
          <image
            class="image"
            src=""
            mode="scaleToFill"
          />
        </navigator>
      </view>
    </view>

    <!-- 用户推荐 -->
    <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
      <view class="icons">
        <button class="icons-button"><text class="icon-heart"></text>收藏</button>
        <button class="icons-button" open-type="contact">
          <text class="icon-handset"></text>客服
        </button>
        <navigator class="icons-button">
          <text class="icon-cart"></text>购物车
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  display: flex;

}
</style>